<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="856px"
    top="0"
    :before-close="cancelBtn"
    :close-on-click-modal="false"
    @open="open"
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-position="top"
      class="checkForm"
    >
      <div class="cont_title">个人信息</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="填写真实姓名"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender" size="small">
              <el-radio label="0" disabled>男</el-radio>
              <el-radio label="1" disabled>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input
              v-model="formData.idCard"
              placeholder="填写真实姓名身份证号"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="出生日期">
            <el-input
              v-model="birthday.dateYear"
              placeholder="年"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-input
              v-model="birthday.dateMonths"
              placeholder="月"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-input
              v-model="birthday.dateDay"
              placeholder="日"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="籍贯" prop="jiguanProvince">
            <el-input
              v-model="formData.jiguanProvince"
              placeholder="省"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " prop="jiguanCity">
            <el-input
              v-model="formData.jiguanCity"
              placeholder="市"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-input
              v-model="formData.nation"
              placeholder="填写民族"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入学年份" prop="startSchoolDate">
            <el-input
              v-model="formData.startSchoolDate"
              placeholder="填写入学年份"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-input
              v-model="formData.politicalStatus"
              placeholder="填写政治面貌"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="填写手机号"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input
              v-model="formData.email"
              placeholder="填写电子邮箱"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="cont_title">学校信息</div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="就读中学" prop="schoolProvince">
            <el-input
              v-model="formData.schoolProvince"
              placeholder="省"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " prop="schoolCity">
            <el-input
              v-model="formData.schoolCity"
              placeholder="市"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" " prop="school">
            <el-input
              v-model="formData.school"
              placeholder="填写就读中学"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中学联系人" prop="schoolContacts">
            <el-input
              v-model="formData.schoolContacts"
              placeholder="填写中学联系人"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中学联系电话" prop="schoolPhone">
            <el-input
              v-model="formData.schoolPhone"
              placeholder="填写中学联系电话"
              size="small"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="cont_title">学习成绩证明材料</div>
      <el-form-item label="成绩证明资料" class="bgPic" prop="gender">
        <el-image
          v-if="picList.length>0"
          v-for="(item, index) in picList"
          :key="index"
          :src="item"
          class="avatar"
          fit="contain"
          :preview-src-list="picList"
        ></el-image>
        <div v-if="picList.length==0" class="bgInfo">暂无证明资料</div>
      </el-form-item>

      <el-form-item class="btn" v-if="type==0">
        <el-button @click="confirm">通过</el-button>
        <el-button type="primary" @click="noConfirm">不通过</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import {GetCheckInfo, GetProvinceList, GetCityList, GetSchool} from "@/api/campSystem/campOper";
  // import {GetProvinceList, GetCityList, GetSchool} from "@/api/toolsystem/school";

  export default {
    name: "CheckForm",
    props: {
      dialogVisibleFu: Boolean,
      phoneFu: [Number, String],
      campsiteIdFu: [Number, String],
      typeFu: [Number, String],
      titleFu: [Number, String]
    },
    data() {
      return {
        dialogVisible: this.dialogVisibleFu,
        formData: {},
        picList: [], // 学习成绩证明材料图片列表
        campsiteId: this.campsiteIdFu,
        type: this.typeFu,
        title: this.titleFu,
        birthday: {
          dateYear: null,
          dateMonths: null,
          dateDay: null
        }
      };
    },
    methods: {
      open() {
        // 获取当前审核资料详情
        GetCheckInfo({
          phone: this.phoneFu,
          campsiteId: this.campsiteId
        })
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.formData = response.data;
            if (this.formData && this.formData.achievementPath) {
              this.picList = this.formData.achievementPath.split(',');
            }
            if (this.formData && this.formData.birthday) {
              this.birthday['dateYear'] = this.formData.birthday.slice(0, 4)
              this.birthday['dateMonths'] = this.formData.birthday.slice(4, 6)
              this.birthday['dateDay'] = this.formData.birthday.slice(6, 8)
            }
            if(this.formData.jiguanProvince||this.formData.schoolProvince){
              this.getProvince();
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      confirm() {
        this.dialogVisible = false;
        this.$emit("closeDialog", this.dialogVisible, 1, this.formData);
      },
      noConfirm() {
        this.dialogVisible = false;
        this.$emit("closeDialog", this.dialogVisible, 2, this.formData);
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.dialogVisible = false;
        this.$refs["formRef"].resetFields();
        this.birthday['dateYear'] = null;
        this.birthday['dateMonths'] = null;
        this.birthday['dateDay'] = null;
        this.picList = [];
        this.$emit("closeDialog", this.dialogVisible, false);
      },
      // 获取省份列表
      getProvince() {
        GetProvinceList()
          .then(response => {
            response.forEach(item => {
              if (item.provinceId == this.formData.jiguanProvince) {
                this.formData.jiguanProvince = item.provinceName;
                this.changeProvince(1, item.provinceId);
              }
              if (item.provinceId == this.formData.schoolProvince) {
                this.formData.schoolProvince = item.provinceName;
                this.changeProvince(2, item.provinceId);
              }
            })
          }).catch(err => {
          console.log(err)
        })
      },
      // 改变省份，获取城市列表
      changeProvince(type, value) {
        console.log(type, value)
        GetCityList(value + '').then((res) => {
          console.log(res)
          if (res.code != 200) {
            return this.$message.error(res.msg);
          }
          res.data.forEach(item => {
            if (type == 1 && item.cityId == this.formData.jiguanCity) {
              this.formData.jiguanCity = item.name;
            }
            if (type == 2 && item.cityId == this.formData.schoolCity) {
              this.formData.schoolCity = item.name;
              this.changeCity(item.cityId);
            }
          })
        }).catch(err => {
          console.log(err);
        });
      },
      // 改变城市，获取学校列表
      changeCity(value) {
        GetSchool(value).then((res) => {
          console.log(res)
          res.data.forEach(item => {
            if (item.schoolId == this.formData.school) {
              this.formData.school = item.name;
            }
          })
        }).catch(err => {
          console.log(err);
        });
      },
    },
    watch: {
      dialogVisibleFu() {
        this.dialogVisible = this.dialogVisibleFu;
      },
      campsiteIdFu() {
        this.campsiteId = this.campsiteIdFu;
      },
      typeFu() {
        this.type = this.typeFu;
      },
      titleFu() {
        this.title = this.titleFu;
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog {
    height: 90%;
    display: flex;
    flex-flow: column;

    .el-dialog__header {
      text-align: center;
      padding: 20px;
    }

    .el-dialog__body {
      padding: 10px 50px 30px;
      flex: 1;
      overflow-y: scroll;
      display: flex;
      flex-flow: column;

      .checkForm {
        flex: 1;

        .cont_title {
          height: 48px;
          line-height: 48px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #12141C;
        }

        .el-form-item {
          margin-bottom: 20px;

          .el-form-item__label {
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #12141C;
          }

          .el-form-item__content {
            height: 40px;
            line-height: 40px;

            .el-input,
            .el-input.is-disabled {
              height: 40px;

              .el-input__inner {
                height: 40px;
                border-radius: 4px;
                border: 1px solid #E1E3E6;
                background-color: #FFFFFF;
                color: #656872;

                &:hover {
                  border-color: #4D75F3;
                }

                &:focus {
                  border-color: #4D75F3;
                }
              }
            }

            .el-radio-group {
              .el-radio {
                .el-radio__label {
                  color: #656872;
                }

                .el-radio__input,
                .el-radio__input.is-disabled {
                  .el-radio__inner {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 50%;
                  }

                  &.is-checked {
                    .el-radio__inner {
                      background: #ffffff !important;
                      border-color: #4D75F3;

                      &::after {
                        width: 7.5px;
                        height: 7.5px;
                        background: #4D75F3 !important;
                      }
                    }
                  }
                }
              }
            }
          }

          &.btn {
            .el-form-item__content {
              text-align: center;
            }
          }

          &.bgPic {
            height: auto;

            .el-form-item__label {
              font-size: 14px;
            }

            .el-form-item__content {
              height: auto;
            }

            .bgInfo {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #A7A2A6;
              line-height: 24px;
              text-align: left;
            }

            .el-image {
              width: 160px;
              height: 160px;
              border-radius: 4px;
              border: 2px dashed #BCC2CA;
              margin: 10px 10px 0 0;
              padding: 2px;
              >img{
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }

</style>


